import React, { useEffect, useState } from 'react'
import style from './HomePage.module.css'
import {
    NavBar,
    Popup,
    Button,
    Range,
    Divider,
    Space,
} from '@nutui/nutui-react'
import { Category, Popover } from '@nutui/icons-react'
import Home_Faxian from './Home_Faxian';
import Home_Fujin from './Home_Fujin';
import instance from '../http/instance'
export default function HomePage() {
    // tabs切换数据
    const [tab1value, setTab1value] = useState('0')
    const [tabslist] = useState([
        { title: '发现', value: '0' },
        { title: '附近', value: '1' },
    ])
    //是否弹出筛选
    const [showBottom, setShowBottom] = useState(false)
    //性别筛选
    let [sexlist, setsexlist] = useState(["男", "女", "不限"])
    let [sexindex, setsexindex] = useState(-1)
    //学历筛选
    let [xuelilist, setxuelilist] = useState(["初中", "高中", "大学", "博士"])
    let [xueliindex, setxueliindex] = useState(-1)
    //星座筛选
    let [xingzuolist, setxingzuolist] = useState(['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '魔羯座', '水瓶座', '双鱼座'])
    let [xingzuoindex, setxingzuoindex] = useState(-1)
    //所在地筛选
    let [suozaidilist, setsuozaidilist] = useState(['一线城市', '二线城市', '三线城市'])
    let [suozaidiindex, setsuozaidiindex] = useState(-1)
    //发现列表
    let [list, setlist] = useState([])
    //发现和附近的tabs切换
    let changetabs = (item) => {
        setTab1value(item.value)
    }
    let [obj, setobj] = useState({
        age: "",
        sex: "",
        suozaidi: "",
        xueli: "",
        xingzuo: ""
    })
    //获取所在位置
    let [weizhi, setweizhi] = useState("定位")
    //获取数据
    let getlist = async () => {
        let { data: { data } } = await instance.get(`ms_getlists`, {
            params: obj
        })
        setlist(data)
    }
    useEffect(() => {
        getlist()
    }, [])
    return (
        <div className={style.container}>
            {/* 头部开始 */}
            <div className={style.headers}>
                <NavBar
                    style={{ height: '1rem' }}
                    left={
                        <>
                            <Button type="default" onClick={() => { }}>
                                {weizhi}
                            </Button>
                        </>
                    }
                    right={
                        <Category onClick={() => {
                            setShowBottom(true)
                        }} />
                    }
                >
                    {
                        tabslist.map((item) => {
                            return (
                                <div key={item.value} style={{ margin: "0.35rem", fontSize: "0.3rem", borderBottom: tab1value == item.value ? "0.03rem solid purple" : "", fontWeight: tab1value == item.value ? "bold" : "" }} onClick={() => {
                                    changetabs(item)
                                }}>
                                    <span>{item.title}</span>
                                </div>
                            )
                        })
                    }
                </NavBar>
            </div>
            {/* 头部结束 */}
            {/* 主体部分开始 */}
            <div className={style.main}>
                {tab1value == 0 ? <div>
                    <Home_Faxian list={list} getlist={getlist}></Home_Faxian>
                </div> : <div>
                    <Home_Fujin></Home_Fujin>
                </div>}

            </div>
            {/* 主体部分结束 */}
            {/* 筛选搜索开始 */}
            <Popup
                visible={showBottom}
                position="bottom"
                style={{ height: "85%", borderRadius: "0.5rem 0.5rem 0 0", padding: "0.2rem", boxSizing: "border-box" }}
                onClose={() => {
                    setShowBottom(false)
                }}
            >
                {/* 筛选条件标题开始 */}
                <div>
                    <NavBar
                        style={{ fontSize: "0.3rem", backgroundColor: "#fff" }}
                        left={
                            <>
                                <span onClick={() => { setShowBottom(false) }}>X</span>
                            </>
                        }
                        right={
                            <span style={{ color: "#b399fe" }} onClick={(e) => {
                                getlist()
                                setShowBottom(false)
                                setsexindex(-1)
                                setsuozaidiindex(-1)
                                setxueliindex(-1)
                                setxingzuoindex(-1)
                            }}>
                                确定
                            </span>
                        }
                        onBackClick={(e) => { }}
                    >
                        <div style={{ fontSize: "0.3rem", width: "1.2rem" }} >
                            筛选条件
                        </div>
                    </NavBar>
                </div>
                {/* 筛选条件标题结束 */}
                <Divider />
                {/* 筛选条件主体部分开始 */}
                <div>
                    <p style={{ width: "1.2rem", fontSize: "0.2rem", color: "gray" }}>基础条件</p>
                    {/* 搜索年龄 */}
                    <div style={{ marginBottom: "0.5rem" }}>
                        <p style={{ width: "1.2rem", fontSize: "0.4rem", marginBottom: "20px" }}>年龄</p>
                        <div>
                            <Range defaultValue={18} max={30} min={18} currentDescription={null} onEnd={(val) => {
                                let copy = { ...obj }
                                copy.age = val
                                setobj(copy)
                            }} />

                        </div>
                    </div>
                    <p style={{ width: "1.2rem", fontSize: "0.2rem", color: "gray" }}>其他条件</p>
                    {/* 搜索性别 */}
                    <div style={{ marginBottom: "0.5rem" }}>
                        <p style={{ width: "1.2rem", fontSize: "0.4rem", marginBottom: "20px" }}>性别</p>
                        <div>
                            <Space>
                                {
                                    sexlist.map((item, index) => {
                                        return (
                                            <div key={index} className={sexindex == index ? style.active : style.search_sex} onClick={() => {
                                                setsexindex(index)
                                                let copy = { ...obj }
                                                copy.sex = item
                                                setobj(copy)
                                            }}>
                                                {item}
                                            </div>
                                        )
                                    })
                                }
                            </Space>
                        </div>
                    </div>
                    {/* 搜索学历 */}
                    <div style={{ marginBottom: "0.5rem" }}>
                        <p style={{ width: "1.2rem", fontSize: "0.4rem", marginBottom: "20px" }}>学历</p>
                        <div>
                            <Space>
                                {
                                    xuelilist.map((item, index) => {
                                        return (
                                            <div key={index} className={xueliindex == index ? style.active : style.search_sex} onClick={() => {
                                                setxueliindex(index)
                                                let copy = { ...obj }
                                                copy.xueli = item
                                                setobj(copy)
                                            }}>
                                                {item}
                                            </div>
                                        )
                                    })
                                }
                            </Space>
                        </div>
                    </div>
                    {/* 搜索星座 */}
                    <div style={{ marginBottom: "0.5rem" }}>
                        <p style={{ width: "1.2rem", fontSize: "0.4rem", marginBottom: "20px" }}>星座</p>
                        <div style={{ width: "7rem", display: "flex", flexWrap: "wrap" }}>
                            {
                                xingzuolist.map((item, index) => {
                                    return (
                                        <div key={index} className={xingzuoindex == index ? style.active : style.search_sex} onClick={() => {
                                            setxingzuoindex(index)
                                            let copy = { ...obj }
                                            copy.xingzuo = item
                                            setobj(copy)
                                        }}>
                                            {item}
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    {/* 搜索所在地 */}
                    <div style={{ marginBottom: "0.5rem" }}>
                        <p style={{ width: "1.2rem", fontSize: "0.4rem", marginBottom: "20px" }}>所在地</p>
                        <div>
                            <Space>
                                {
                                    suozaidilist.map((item, index) => {
                                        return (
                                            <div key={index} className={suozaidiindex == index ? style.active : style.search_sex} onClick={() => {
                                                setsuozaidiindex(index)
                                                let copy = { ...obj }
                                                copy.suozaidi = item
                                                setobj(copy)
                                            }}>
                                                {item}
                                            </div>
                                        )
                                    })
                                }
                            </Space>
                        </div>
                    </div>
                </div >
                {/* 筛选条件主体部分结束 */}
            </Popup >
            {/* 筛选搜索结束 */}
        </div >
    )
}
